<!-- 进度模板选择 -->
<!-- 搜索项目 -->
<template>
  <view>
    <view @click="onClick">
      <u--input
				disabled
        :placeholder="placeholder"
        :placeholderClass="placeholderClass"
        :placeholderStyle="placeholderStyle"
        :inputAlign="inputAlign"
        :fontSize="fontSize"
        :color="color"
        :prefixIcon="prefixIcon"
        :prefixIconStyle="prefixIconStyle"
        :suffixIcon="suffixIcon"
        :suffixIconStyle="suffixIconStyle"
        :border="border"
        :shape="shape"
        :customStyle="customStyle"
        v-model="title"
        :disabledColor="disabledColor"
      ></u--input>
    </view>
    <u-popup
      class="form-popup"
      mode="right"
      :show="showPopup"
      @close="close"
      @open="open"
    >
      <!-- <u-loading-page color="#666" v-if="loading"></u-loading-page> -->
      <view>
		  <u-navbar
		    :title="placeholder"
		    @leftClick="close"
		  ></u-navbar>
		  <view :style="'height:' + getSafeAreaTop() + 'px'"></view>
        <scroll-view scroll-y class="popup-list-page" :style="'height: '+getScorollHeight()+'px;'">
          <template>
            <view class="page">
              <view
                class="list-item"
                v-for="(item, index) in entities"
                :key="index"
                @click="onChecker(item, index)"
              >
				<view class="project-item">
				  <view class="option">
				    <view class="lf">节点名称</view>
				    <view class="rl">{{ item.nodeName }}</view>
				  </view>
				  <view class="option">
				    <view class="lf">节点进度</view>
				    <view class="rl">{{ item.nodeProgress?item.nodeProgress+'%':0+'%' }}</view>
				  </view>
				</view>
                <view class="icon" v-show="item.isChecker">
                  <u-icon
                    name="checkbox-mark"
                    color="#2979ff"
                    size="22"
                  ></u-icon>
                </view>
              </view>
            </view>
          </template>
          <view style="height: 160rpx"></view>
          <view class="btn">
            <u-button text="确定" type="primary" @click="onConfirm"></u-button>
          </view>
        </scroll-view>
        <u-toast ref="uToast"></u-toast>
      </view>
    </u-popup>
  </view>
</template>

<script>
import CommonSearch from '@/components/CommonSearch.vue'

export default {
  name: 'selectTaskProgressInput',
  data() {
    return {
      loading: false,
      showPopup: false,
      title: '', // 选中的标题名称
      showNotify: true, // 消息提示
      id: '', // 选中的id
      entities: [], // 列表
      isData: true, // 判断是否有数据  true 代表有 false 代表无
      loadStatus: 'loadmore', // 通过status设置组件的状态，加载前值为loadmore，加载中为loading，没有数据为nomore
      oldIndex: null, // 存储列表之前被选中的数据
    }
  },
  components: {
    CommonSearch,
  },
  model: {
    prop: 'value',
    event: 'input',
  },
  props: {
    valKey: {
      type: [String, Number],
      default: 'id',
    },
	progressVoList: {
		type: Array,
		default: () => [],
	},
    // 是否从 result records 中获取数据
    records: {
      type: Boolean,
      default: true,
    },
    searchPlaceholder: {
      type: String,
      default: '请输入',
    },
    isMulti: {
      type: Boolean,
      default: false,
    },
    // 编号（不知道啥玩意后台没有备注）
    signUnit: {
      type: [String, Number],
      default: '',
    },
    // 借款所属团队
    teamName2: {
      type: [String, Number],
      default: '',
    },
    // 对象字段
    objectField: {
      type: [String],
      default: 'basicForm.yzdw',
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 选中的值
    value: {
      type: [String, Number, Array],
      default: '',
    },
    // 输入框为空时的占位符
    placeholder: {
      type: [String, Number],
      default: '请选择',
    },
    // 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
    placeholderClass: {
      type: [String],
      default: '',
    },
    // 指定placeholder的样式，字符串/对象形式，如"color: red;"
    placeholderStyle: {
      type: [String, Object],
      default: 'color: #C0C4CC'
    },
    // 输入框内容对齐方式 - left | center | right
    inputAlign: {
      type: [String],
      default: 'left',
    },
    // 输入框字体的大小
    fontSize: {
      type: [String, Number],
      default: '15px',
    },
    // 输入框字体颜色
    color: {
      type: [String],
      default: '#303133',
    },
    // 输入框前置图标
    prefixIcon: {
      type: [String],
      default: '',
    },
    // 前置图标样式，对象或字符串
    prefixIconStyle: {
      type: [String, Object],
      default: '',
    },
    // 输入框前置图标
    suffixIcon: {
      type: [String],
      default: '',
    },
    // 前置图标样式，对象或字符串
    suffixIconStyle: {
      type: [String, Object],
      default: '',
    },
    // 边框类型，surround-四周边框，bottom-底部边框，none-无边框
    border: {
      type: [String],
      default: 'surround',
    },
    // 输入框形状，circle-圆形，square-方形
    shape: {
      type: [String],
      default: 'square',
    },
    customStyle: {
      type: [Object],
      default: () => {},
    },
    params: {
      type: Object,
      default: () => {},
    },
    keywords: {
      type: String,
      default: '',
    },
    getList: {
      type: Function,
      default: () => {},
    },
  },
  watch: {
    // 监听value是否有值
    value: {
      handler(val, oldVal) {
				this.id = val
        if (val) {
          this.getItemDetail(val)
        } else {
          this.title = ''
        }
      },
      deep: true,
      immediate: true,
    },
		progressVoList: {
			handler (val, oldVal) {
				if (val && val.length) {
					// 处理数据
					this.entities = []
					this.oldIndex = null
					val.map((value, index) => {
							// 是否选中数据
							value.isChecker = false
							
							var objValue = {...value}
							if (value.id == this.value) {
								value.isChecker = true
								this.oldIndex = index // 当单选的时候
							objValue = {...value}
							}
							// return value
							this.entities.push(objValue)
					})
				}
			},
			immediate: true,
			deep: true
		}
  },
  computed: {
    // 当是disabled为true改变禁用的颜色
    disabledColor() {
      return this.disabled ? '#f5f7fa' : '#FFFFFF'
    },
  },
  methods: {
    // 获取详情
    getItemDetail(id) {
		if (this.progressVoList && this.progressVoList.length) {
			this.title = this.value
			// 处理数据
			this.entities = []
			this.oldIndex = null
			this.progressVoList.map((value, index) => {
				if (value.id == id) {
					this.title = value.nodeName
					this.$emit('detail', value)
				}
				// 是否选中数据
				value.isChecker = false
				var objValue = {...value}
				if (value.id == this.value) {
					value.isChecker = true
					this.oldIndex = index // 当单选的时候
				objValue = {...value}
				}
				// return value
				this.entities.push(objValue)
			})
		}
    },
	
	// 获取safeArea
	getSafeAreaTop () {
		var top = 0
		// #ifdef APP-PLUS
		top = uni.getStorageSync('getSystemInfo').safeArea.top + 44
		// #endif
		// #ifdef H5
		top = 44
		// #endif
		return top
	},
	// 获取safeArea
	getScorollHeight () {
		let height = uni.getStorageSync('getSystemInfo').screenHeight - uni.getStorageSync('getSystemInfo').safeArea.top - 44 - 32
		return height
	},
    // 点击选中取消选中
    onChecker(item, index) {
      // 多选
      if (this.isMulti) {
        item.isChecker = !item.isChecker
        this.updateTitle()
        return
      }
			item.isChecker = !item.isChecker
			if (this.oldIndex !== null && this.oldIndex !== index) {
			  this.entities[this.oldIndex].isChecker = false
			  this.id = item.id
			} else {
			  this.id = ''
			}
			this.oldIndex = index
    },
    updateTitle() {
      const hasCheck = this.entities.some((i) => i.isChecker)
      if (!hasCheck) this.title = ''
    },
    onClick() {
      if (this.disabled) return
	  if (!this.progressVoList || !this.progressVoList.length) {
		  uni.showToast({
		  	title: '无可关联的任务进度！',
			icon: 'none'
		  })
		  return false
	  }
      this.showPopup = true
    },
    onConfirm() {
      if (this.isMulti) {
        const items = this.entities.filter((i) => i.isChecker)
        const data = items.map((i) => i?.[this.valKey])
        this.$emit('input', data.join(','))
		if (items && items.length) {
			this.getItemDetail( data.join(',') )
		}
        if (data !== this.value) {
          this.$emit('change', items)
        }
      } else {
        const item = this.entities.find((i) => i.isChecker)
        this.$emit('input', item?.[this.valKey] || '')
		if (item && item.id) {
			this.getItemDetail(item[this.valKey])
		}
        if (this.value !== item?.[this.valKey]) {
          this.$emit('change', item)
        }
      }
      this.showPopup = false
	  this.$emit('update:keywords', '')
    },
    open() {
    },
    close() {
		this.showPopup = false
		this.$emit('update:keywords', '')
	},
  },
}
</script>

<style lang="scss" scoped>
.page {
  padding: 0 20rpx 20rpx 20rpx;
}
.list-item {
  border-radius: 10rpx;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
  padding: 12rpx 20rpx 20rpx 20rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20rpx;
}
// 按钮
.btn {
  position: fixed;
  bottom: 20rpx;
  width: 100%;
  padding: 0 10px;
}
</style>

